<template>
  <div>
    <div class="page_title">个人权限管理</div>
    <FormTable
      :formRules="formRules"
      :tableData="tableData"
      :columns="columns"
      :total="total"
      :currentPage="pageIndex"
      :pageSize="pageSize"
      @changeTableData="changeTableData"
      @queryTable="queryTable"
    >
      <template #tableTabs>
        <div style="display: flex; justify-content: end; margin-bottom: 16px">
          <el-button type="primary" @click="edit1()">新增</el-button>
        </div>
      </template>
      <template #operator="{ slotProps }" class="table_button_list">
        <el-button link type="primary" @click="edit1(slotProps)"
          >修改</el-button
        >
        <el-popconfirm
          class="box-item"
          title="确认删除吗？"
          placement="top-start"
          @confirm="delItem(slotProps)"
        >
          <template #reference>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </FormTable>
    <grqxglForm
      v-model="dialogVisible"
      :dataForm="dialogForm"
      v-if="dialogVisible"
      @close="dialogVisible = false"
      :isDetail="isDetail"
      @getDatas="queryTable()"
    />
  </div>
</template>
<script>
import FormTable from "@/components/FormTable/index.vue";
import grqxglForm from "./grqxglForm.vue";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { apiUrl } from "@/api/api";
import axios from "axios";
import moment from "moment";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "",
  components: { FormTable, grqxglForm },
  setup() {
    const dataMap = reactive({
      tableData: [],
      formRules: [
        {
          type: "input",
          field: "applicationName",
          title: "应用名称",
          value: "",
        },
      ],
      searchForm: {
        applicationName: "",
      },
      columns: [
        {
          label: "序号",
          type: "index",
          width: "70px",
        },
        {
          label: "用户名称",
          prop: "userName",
        },
        // {
        //   label: "手机号",
        //   prop: "phone",
        // },
        {
          label: "应用名称",
          prop: "applicationName",
        },
        {
          label: "角色名称",
          prop: "identityName",
        },
        // {
        //   label: "白名单类型",
        //   prop: "authTypeName",
        // },
        // {
        //   label: "白名单值",
        //   prop: "authValue",
        // },
        {
          label: "组织名称",
          prop: "orgName",
        },
        {
          prop: "operator",
          label: "操作",
          align: "center",
          width: "120px",
        },
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      isDetail: false,
      isFabu: false,
      dialogForm: {},
    });
    const methodsMap = reactive({
      detail(items) {
        dataMap.dialogForm = items;
        dataMap.isDetail = true;
        dataMap.isFabu = false;
        dataMap.dialogVisible = true;
      },
      delItem(item) {
        axios({
          method: "get",
          url: apiUrl.baseUrl + "/wl/authentication/delete?id=" + item.id,
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            loginToken: sessionStorage.getItem("loginToken"),
          },
        })
          .then((response) => {
            console.log("response", response);
            methodsMap.getDatas();
            ElMessage.success("删除成功");
          })
          .catch((error) => {
            console.log("粗错", error);
          });
        return;
      },
      edit1(items) {
        if (items) {
          dataMap.dialogForm = items;
          dataMap.isDetail = true;
        } else {
          dataMap.isDetail = false;
        }
        dataMap.dialogVisible = true;
      },
      changeTableData(pageNum, pageSize) {
        dataMap.pageIndex = pageNum;
        dataMap.pageSize = pageSize;
        methodsMap.getDatas();
      },
      getDatas() {
        let data = {
          pageNum: dataMap.pageIndex,
          pageSize: dataMap.pageSize,
          groups: [],
          rules: [
            {
              field: "applicationName",
              data: dataMap.searchForm.applicationName || "",
              opType: "Contains",
            },
          ],
          orderBys: [],
        };
        axios({
          method: "post",
          url: apiUrl.baseUrl + "/wl/authentication/getUserPageList",
          data: data,
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            loginToken: sessionStorage.getItem("loginToken"),
          },
        })
          .then((response) => {
            dataMap.tableData = response.data.data.data.list;
            dataMap.total = response.data.data.data.total;
          })
          .catch((error) => {});
      },
      queryTable(params) {
        dataMap.searchForm = params || {};
        dataMap.pageIndex = 1;
        methodsMap.getDatas();
      },
    });
    onMounted(() => {
      methodsMap.getDatas();
    });
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
    };
  },
});
</script>
<style lang="scss" scoped></style>
